<template>
  <div class="point-view">
    <el-drawer
      class="drawer"
      :title="`点位管理-${regionInfo.regionName}`"
      v-model="drawer"
      direction="rtl"
      size="65%"
    >
      <div class="content">
        <div class="top">
          <el-button type="primary" class="add-button" @click="addPoint">
            创建点位
          </el-button>
        </div>
        <div class="tablePage">
          <Table
            ref="tableRef"
            :not-data-img="$CONSTANTS.NOT_DATA_IMG"
            :table-columns="tableTitle"
            :remote-api="getPointListApi"
            :autoLoad="false"
            :pageNumberList="[10, 20, 50, 100]"
            ppageFieldName="page"
            pnumberFieldName="limit"
            :fixedHeaderMaxHeight="850"
          >
            <template #index="scope">
              {{ scope.index + 1 }}
            </template>
            <template #remark="scope">
              <tool-tip style="width: 150px" :text="scope.row.remark"
                        :max-length="30" :show-line-num="3"/>
            </template>
            <template #operate="scope">
              <el-button class="edit-button" @click="editPointFunc(scope.row)">
                编辑
              </el-button>
              <el-button
                type="danger"
                :icon="Delete"
                class="delete-button"
                @click="delPoint(scope.row)"
              ></el-button>
            </template>
          </Table>
        </div>
      </div>
    </el-drawer>
    <editPoint ref="editPointRef" :mode="editMode" :regionId="regionInfo.regionId" @afterSubmit="getListData('getData')"/>
  </div>
</template>

<script setup lang="ts">
import {regionInfoDTO, getPointListApi, queryPointParam, pointDTO, delPositionApi} from "@/api/region";
import {ITableColumnItem} from "@/components/common/Table.vue";
import $CONSTANTS from '@/constants/globalConstants'
import {IBaseQueryDataListParams} from "@/api";
import {Delete} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";

interface Props {
  regionInfo: regionInfoDTO
}

const props = withDefaults(defineProps<Props>(), {
  regionInfo: () => {
    return {regionName: ''}
  }
})

const tableRef = ref();
const editPointRef = ref();
const drawer = ref<Boolean>(false);

const form = reactive<IBaseQueryDataListParams<queryPointParam>>({
  data: {
    regionId: 0
  }
})
const editMode = ref<string>('add')

const tableTitle = ref<ITableColumnItem>([
  {label: "序号", prop: "index", width: 80, align: "center", template: true, fixed: true},
  {label: "点位名称", prop: "positionName"},
  {label: "已关联设备", prop: "relevanceDeviceName"},
  {label: "已关联设备总数", prop: "relevanceDeviceCount"},
  {label: "点位描述", prop: "remark", template: true, width: 170},
  {label: "创建时间", prop: "createTime"},
  {label: "操作", prop: "operate", template: true, fixed: "right", width: 150},
])


const getListData = (type: string) => {
  if (type == 'search') {
    tableRef?.value?.refreshData(form);
  } else {
    tableRef?.value?.queryData(form);
  }
}
const editPointFunc = (row: pointDTO) => {
  editPointRef.value.dialogFormVisible = true;
  Object.assign(editPointRef.value.form, row);
  editMode.value = 'edit'
}

const addPoint = () => {
  editPointRef.value.dialogFormVisible = true;
  editMode.value = 'add'
}

const delPoint = (row: pointDTO) => {
  ElMessageBox.confirm('确认要删除所选点位吗？', '提示', {type: 'warning',})
    .then(async () => {
      let res = await delPositionApi(row.id);
      if (res.data.code == 0) {
        ElMessage.success('删除成功');
        getListData("getData");
      }
    })
}

watch(() => props.regionInfo.regionId, (newVal) => {
  if (newVal) {
    form.data.regionId = newVal
    nextTick(() => {
      getListData('getData')
    })

  }
});

defineExpose({
  drawer
})

</script>

<style lang="scss" scoped>
.point-view {
  :deep(.el-drawer__header) {
    margin-bottom: 0px !important;
  }
  .content {
    padding: 0 0 20px 0;

    .top {
      margin: 20px;
    }
  }
}
</style>